<template>
  <div>
    <Breadcrumb :list="list"></Breadcrumb>
    <div class="top">
      <span>标题: </span
      ><a-input v-model:value="value" placeholder="标题" style="width: 300px" />
      <a-space>
       <span> 状态:</span>
        <a-select
          v-model:value="value"
          style="width: 200px"
          @change="handleChange"
        >
          <a-select-option value="草稿">草稿</a-select-option>
          <a-select-option value="已发布">已发布</a-select-option>
        </a-select>
       <span> 分类：</span>
        <a-select
          v-model:value="value"
          :options="options"
          style="width: 200px"
          @change="handleChange"
        ></a-select>
      </a-space>
      <div class="btn">
        <a-button type="primary">搜索</a-button>
      <a-button>重置</a-button>
      </div>
    </div>
   <div class="table">
      <a-button type="primary" style="margin: 0 95%" @click="handle">新建+</a-button>
    <div
      v-show="SelectedLength.length > 0"
    >
      <a-button>发布</a-button>
      <a-button>草稿</a-button>
      <a-button>首焦推荐</a-button>
      <a-button>撤销首焦</a-button>
      <a-button danger @click="allDe">删除</a-button>
    </div>
    <a-table
      :data-source="dataSource"
      :columns="columns"
      :row-selection="rowSelection"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'classify'">
          <span>
            <a-tag
              :color="record.classify === '前端' ? 'geekblue' : 'green'"
            >
              {{ record.classify }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'label'">
          <span>
            <a-tag
              v-for="v in record.label"
              :key="v"
              :color="v === 'a' ? 'slategray' : 'cyan'"
            >
              {{ v }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <span>
            <a @click="toEdit(record.id)">编辑</a>
            <a-divider type="vertical" />
            <a>首焦推荐</a>
            <a-divider type="vertical" />
            <a>查看访客</a>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="dataSource?.length"
              title="确认删除吗?"
              @confirm="onDelete(record.id)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>
   </div>
  </div>
</template>

<script lang="ts" setup>
import Breadcrumb from "../../components/Breadcrumb/index.vue";
import { ref, onMounted } from "vue";
import { fetchList, apiDel,allDel} from "../../api/all-articles";
import type { SelectProps } from "ant-design-vue";
import {DataItem} from "@/interface"
import { useRouter } from "vue-router";
const list = ref<string[]>(["工作台", "所有文章"]);
const dataSource = ref<DataItem[]>();
const columns = [
  {
    title: "标题",
    dataIndex: "headline",
    key: "headline",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "分类",
    dataIndex: "classify",
    key: "classify",
  },
  {
    title: "标签",
    dataIndex: "label",
    key: "label",
  },
  {
    title: "阅读量",
    dataIndex: "reading",
    key: "reading",
  },
  {
    title: "喜欢数",
    dataIndex: "likeing",
    key: "likeing",
  },
  {
    title: "发布时间",
    dataIndex: "datetime",
    key: "datetime",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];
const router=useRouter()
//新建
const handle=()=>{
  router.push("/addeditor")
}
//编辑
const toEdit=(id:number)=>{
  router.push(`/editor/${id}`)
}
//下拉
const value = ref<string>("");
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const options = ref<SelectProps["options"]>([
  {
    value: "前端",
    label: "前端",
  },
  {
    value: "后端",
    label: "后端",
  }
]);
//全选 单选
const SelectedLength = ref<any>([]);
const delKey=ref<any>()
const rowSelection = ref({
  checkStrictly: false,
  onChange: (
    selectedRowKeys: string[],
    selectedRows: DataItem[]
  ) => {
    SelectedLength.value = selectedRows;
    //存储要删除的数据
    delKey.value=selectedRows
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows);
  },
});
const allDe=async()=>{
 let resp=await allDel({arr:delKey.value})
 getList()
}
const onDelete = (key: number) => {
  apiDel(key).then((res) => {
    getList();
  });
};
const getList = async () => {
  let resp = await fetchList();
  dataSource.value = resp.data.data;
};
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.top{
  background: white;
  padding: 20px;
  margin-top: 20px;
}
.top span{
  margin-right: 20px;
}
.btn{
  margin-left: 90%;
}
.table{
  margin-top: 20px;
  background: white;
  padding: 10px;
}
</style>
